<template>
  <div class="container_box">
    <Header></Header>
    <div class="main warpper_box">
      <div class="box">
        <div class="title">
          <mu-tabs :value.sync="loginIndex" full-width>
            <mu-tab
              v-for="(item, index) in loginTitle"
              :key="index"
              @click="handleClick(index)"
              >{{ item }}</mu-tab
            >
          </mu-tabs>
        </div>
        <!-- 登录 -->
        <div class="login" v-show="loginIndex == 0">
          <el-form
            :model="validateForm"
            :rules="rules"
            ref="validateForm"
            label-width="95px"
            class="demo-ruleForm"
            :hide-required-asterisk="true"
          >
            <el-form-item label="用户名" prop="name">
              <el-input v-model="validateForm.name" type="text"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="pwd">
              <el-input
                v-model="validateForm.pwd"
                type="password"
              ></el-input>
            </el-form-item>
            <el-row :span="18" style="padding: 0 10px 16px">
              <el-col :span="10">
                <mu-checkbox
                  label="同意用户协议"
                  v-model="validateForm.isAgree"
                ></mu-checkbox>
              </el-col>
              <el-col :span="6" :offset="8">
                <mu-button flat color="primary">忘记密码</mu-button>
              </el-col>
            </el-row>
            <el-col :span="18" :offset="4" class="submitForm">
              <mu-button full-width color="primary" @click="submitForm"
                >立即登录</mu-button
              >
            </el-col>
          </el-form>
        </div>
        <!-- 注册 -->
        <div class="register" v-show="loginIndex == 1">
          <el-form
            :model="registerFrom"
            :rules="rulesFrom"
            ref="registerRule"
            label-width="95px"
            class="demo-ruleForm"
            :hide-required-asterisk="true"
          >
            <el-form-item label="用户名：" prop="name">
              <el-input v-model="registerFrom.name" type="text"></el-input>
            </el-form-item>
            <el-form-item label="手机号码：" prop="phone">
              <el-input v-model="registerFrom.phone" type="text"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="pwd">
              <el-input v-model="registerFrom.pwd" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPwd">
              <el-input
                v-model="registerFrom.confirmPwd"
                type="password"
              ></el-input>
            </el-form-item>
            <el-col :span="18" :offset="4">
              <mu-button full-width color="primary" @click="registerSubmit"
                >立刻注册</mu-button
              >
            </el-col>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { post, get } from "@/plugins/api.js";
import { validatePhone, validatePass } from "../utils/validate/validate.js";
export default {
  props: {},
  components: {},
  data() {
    // 再次输入密码校验
    let validatePass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      }
      if (value !== this.registerFrom.confirmPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 登录验证表单
      rules: {
        name: [
          {
            require: true,
            trigger: "blur",
            message:'请输入用户名'
          },
        ],
        password: [
          {
            require: true,
            validator: validatePass,
            trigger: "blur",
          },
        ],
        
      },
      // 注册验证表单
      rulesFrom: {
        username: [
          { required: true, message: "请输入你的用户名", trigger: "blur" },
        ],
        phone: [{ validator: validatePhone, trigger: "blur" }],
        apassword: [{ validator: validatePass2, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      loginTitle: ["登录", "注册"],
      loginIndex: 0, // 切换的索引
      // 登录的表单
      validateForm: {
        pwd: "", // 密码
        name: "", // 手机号码
      },
      // 注册的表单信息
      registerFrom: {
        name: "", // 用户名
        phone: "", // 手机号码
        pwd: "", // 密码
        confirmPwd: "", // 再次输入密码
      },
      uid: "", // 用户id
     
    };
  },
  methods: {
    async hanleClick() {
      // const res = await post("/users/login", this.form);
      // console.log(res);
    },
    handleClick(index) {
      this.loginIndex = index;
    },
    // 提交表单(登录)
    submitForm() {
      // 获取验证进行验证
      this.$refs.validateForm.validate(async (valid) => {
        if (valid) {
          const res = await post("/user/login/", this.validateForm);
          if (res.status == 200) {
            const { token, username } = res.content;
            this.$store.commit("SET_TOKEN", token);
            this.$store.commit("SET_NAME", username);

            // 获取用户信息
            this.$message({
              message: res.desc,
              type: "success",
            });
            this.$router.replace({
              path: "/",
            });
          }
        }
      });
    },
    // 提交表单(注册)
    registerSubmit() {
      this.$refs.registerRule.validate((valid) => {
        // console.log(valid);
        if (valid) {
          post("/user/register/", this.registerFrom).then((res) => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: res.desc,
              });
            }
          });
        }
      });
    },
    // 切换验证码
    sendCode() {
      let timeId = null;
      if (this.throttle) {
        // 发送短信验证码
        this.throttle = false;
        clearInterval(timeId);
        timeId = setInterval(() => {
          this.count--;
          if (this.count == 0) {
            clearInterval(timeId);
            this.count = 60;
            this.throttle = true;
          }
        }, 1000);
      }
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.container_box {
  width: 100%;
  height: 700px;
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F65%2F72%2F495b727064a840d.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640529001&t=bbe836737bc552d160f29419398d4387")
    // background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew13.photophoto.cn%2F20190313%2Fshuishangleyuanhaidunbiaoyanyouwanbeijing-32408222_1.jpg&refer=http%3A%2F%2Fpicnew13.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640529188&t=50e597f6f927951d59ae3b0de7e79311")
    no-repeat top center;
  background-size: contain;
  background-color: #011d33;

  .main {
    position: relative;

    height: 100%;

    .box {
      background-color: #fff;
      position: absolute;
      right: 0px;
      top: 8%;
      color: #37bcfb;
      width: 350px;
      height: 446px;
      padding-bottom: 20px;
      .title {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          height: 100%;
          &.active {
            color: #fff;
            background-color: #37bcfb;
          }
        }
      }
      .login,
      .register {
        padding: 40px 40px 15px 10px;
        .code_box {
          margin-left: 8px;
          border: 1px solid #ddd;
          padding: 8px 8px;
          text-align: center;
          a {
            font-size: 12px;
            color: #2196f3;
          }
        }
        .submitForm {
          margin-top: 72px;
        }
      }
    }
  }
}
</style>
